<template>
  <el-dialog v-model="dialogFormVisible" :title="title" @close="closeDialog" style="width:800px;">
    <!-- <el-transfer v-model="selectList" filterable :left-default-checked="selectList" :right-default-checked="selectList"
      :props="{ key: 'id', label: 'name', }" :titles="['全体人员', title]" :button-texts="['移除', '添加']"
      @change="handleChange" :data="list">
    </el-transfer> -->
    <el-transfer v-model="selectList" filterable :data="list" :titles="['全体人员', '权限人员']"
      :props="{ key: 'id', label: 'name', }" :button-texts="['移除', '添加']" @change="handleChange">
    </el-transfer>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel()">取消</el-button>
        <el-button type="primary" @click="save()">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import { ref } from "vue";
import { ElConfigProvider, ElMessageBox, ElMessage } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { httpService } from "@/utils/httpService";
import { Picture as IconPicture } from "@element-plus/icons-vue";
export default {
  name: "BaseTeacherList",
  data() {
    return {
      type: 0,
      dialogFormVisible: ref(false),
      title: "",
      page: 0,
      departmentId: 0,
      pageSize: 10,
      total: 0,
      limit: 10,
      list: [],
      selectList: [],
      // selectList: [5591, 5610, 5612, 6191, 2646, 2141, 1895, 5691],
      rightList: [],
      rId: "",
      form: {
        name: "",
        teacherNumber: "",
      },
    };
  },
  components: {},
  setup() {
    return {
      locale: zhCn,
    };
  },
  mounted() {
    // console.log(111,this.rightList);
  },
  watch: {
    $route() { },

  },
  methods: {
    handleChange() {
      console.log("最新", this.selectList);
    },

    closeDialog() {
      this.dialogFormVisible = false;
      this.selectList = [];
      this.list = [];
    },
    cancel() {
      this.dialogFormVisible = false;
      this.selectList = [];
      this.list = [];
    },
    editHandle(data) {
      data = data.map(item => item = item.uid)
      this.selectList = [...data]
      console.log("id", this.selectList);
    },
    save() {
      if (this.selectList.length == 0) {
        ElMessage.error("请至少选择一名人员后保存");
        return;
      }
      httpService(
        "/javaApi/baseRole/addRoleUsers",
        {
          rId: this.rId,
          uIds: this.selectList,
        },
        "get"
      ).then((data) => {
        if (data.code == 200) {
          ElMessage.success("保存成功");
          //刷新父亲组件
          this.cancel();
          this.$parent.getPersonalList()
        } else {
          ElMessage.success("保存失败");
        }
      });
    },

    filterMethod(query, item) {
      return item.initial.toLowerCase().includes(query.toLowerCase());
    },
    listByDepartmentId() {
      httpService("/javaApi/baseTeacher/list/1/10000", {}, "get").then(
        (data) => {
          for (let k = 0; k < data.list.length; k++) {
            data.list[k].name =
              data.list[k].name + "-" + data.list[k].teacherNumber;
          }
          this.list = data.list;

        }
      );
    },
  },
};
</script>
<style scoped>
.el-main {
  padding: 0px;
  text-align: left;
}

.teacher-content {
  width: 100%;
}

.app-table {
  background: #eff3f5;
  padding: 10px;
}

.app-separator {
  padding-top: 10px;
  padding-bottom: 20px;
  padding-left: 10px;
}

.app-body {
  background: white;
  padding: 20px 20px 10px 20px;
  margin-bottom: 10px;
  min-height: calc(100vh - 204px);
}

.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-lighter);
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-lighter);
}

.el-pagination {
  text-align: center;
  margin-top: 10px;
}
</style>
